<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        
        /* 三种心情，三选一 */
        .happy{
            border: 4px solid red;;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px dashed black;
            background-color: gray;
        }
        .normal{
            border: 4px solid deepskyblue;
            background-color: skyblue;
        }
        
        /* 三个样式，随意选择，可以同时存在 */
        .atguigu1{
            background-color: yellowgreen;
        }
        .atguigu2{
            font-size: 30px;
            text-shadow:2px 2px 10px red;
        }
        .atguigu3{
            border-radius: 20px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <!-- 字符串写法:应用于要绑定的样式确定,类名不确定的情况 -->
        <div class="basic" :class='str'>类型一</div>
        <button @click='changeMood'>点击随机切换心情</button>
        <hr>
        <!-- 对象写法:要绑定的样式确定,个数确定,类名确定, 用不用不确定-->
        <div class="basic" :class='moodObj'>类型二</div>
        <button @click='moodObj.atguigu1 = !moodObj.atguigu1'>应用/取消 atguigu1</button>
        <button @click='moodObj.atguigu2 = !moodObj.atguigu2'>应用/取消 atguigu2</button>
        <button @click='moodObj.atguigu3 = !moodObj.atguigu3'>应用/取消 atguigu3</button>
        <hr>
        <!-- 数组写法:要绑定的样式不确定,个数不确定,类名不确定 -->
        <div class="basic" :class='arr'>类型三</div>
        <input type="text" @keyup.enter='change' v-model='v'><br>
        <button @click='arr = []'>清空所有样式</button>
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el:'#demo',
            data:{
                str:'happy',
                moodObj:{
                    atguigu1:true,
                    atguigu2:true,
                    atguigu3:true
                },
                arr:[],
                v:''
            },
            methods:{
                //切换心情按钮
                changeMood(){
                    let arr = ['happy','sad','normal'];
                    let index = Math.floor(Math.random() * 3);
                    this.str = arr[index];
                },
                //数组写法的回调
                change(e){
                    let {value} = e.target;
                    this.arr.push(value);
                    this.v = ''
                }
            }
        })
    </script>
</body>

</html>